import * as tools from './tools';
import '../sass/common.scss';
import { initHeaderFooter } from './gopLib/initHeaderFooter';
var showdown  = require('showdown'),
    converter = new showdown.Converter();
    converter.setOption('tables', true);
let MENU = {};
jQuery.support.cors = true;

$(function () {
    initHeaderFooter('api');

    $('.loginCheck').click(function (e) {
        // let url = sessionStorage.getItem('url')
        // if(url != 'undefined' && url) {
        //   location.href = url;
        // }else {
        location.href = './login.html';
        // }
    })
    //api 详情点击、
    $('#help_2').on('click', '.tab_item a', function () {
        hideCode();
        let $trg = $(this).parent();
        if ($trg.hasClass('active')) return
        $('#help_2 .tab_item').removeClass('active');
        $trg.addClass('active');
        let id = $trg.attr('data-id');
        getApiDetail(id);
        $(window).scrollTop(0);
    });

    $('#help_1').on('click', '.tab_item a', function () {
        let $trg = $(this).parent();
        let id = $trg.attr('data-id');
        let $content = $('#' + id);

        $trg.addClass('active').siblings().removeClass('active');
        $content.addClass('active').siblings().removeClass('active');
    })


    //api 头部tab切换
    $('.normal_tab_head a').click(function () {
        let id = $(this).attr('data-id');
        let $trg = $('#' + id);
        $(this).addClass('active').siblings().removeClass('active');
        $trg.addClass('active').siblings().removeClass('active');
    })

    //
    initApiMenu();

})

//获取接口详情
function getApiDetail(apiId) {
    $.ajax({
        url: tools.apiUrl + 'api/detail',
        type: 'get',
        data: {
            apiId
        },
        success: function (res) {
            renderApiDetail(res.data);
            $('pre code').each(function(i, block) {
                hljs.highlightBlock(block);
            });
        }
    })
}
//渲染接口详情
function renderApiDetail(data) {
    $('#summary').text(data.summary);
    $('#businessConstraint').text(data.businessConstraint);
    $('#requestJsonEg').text(data.requestJsonEg);
    $('#requestXmlEg').text(data.requestXmlEg);
    $('#responseJsonEg').text(data.responseJsonEg);
    $('#responseXmlEg').text(data.responseXmlEg);
    resetActive();
    renderParams(data.params);
    renderProperties(data.reqestProperties, 'req');
    renderProperties(data.responseProperties, 'res')
}
//充值表单
function resetActive() {
    $('.nav-tabs').each(function () {
        let $lis = $(this).find('li');
        $lis.removeClass('active');
        $lis.eq(0).addClass('active');
    })
    $('.tab-content').each(function () {
        let $divs = $(this).find('div');
        $divs.removeClass('active');
        $divs.eq(0).addClass('active');
    })
}
//渲染参数字段
function renderParams(params) {
    let $params = $('#params');
    let params_html = '';
    params.map(val => {
        params_html += `
            <tr>
                <td>${val.name}</td>
                <td>${val.value}</td>
                <td>${val.summary}</td>
            </tr>
        `
    });
    $params.html(params_html);
}
//渲染请求,响应报文字段
function renderProperties(trg, id) {

    let $trg = $('#' + id);
    let trg_html = '';
    trg.map(val => {
        trg_html += `
            <tr>
                <td>${val.name}</td>
                <td>${val.summary}</td>
                <td>${val.propType}</td>
                <td>${val.propLength}</td>
                <td>${val.mandatory == false ? 'N' : 'Y'}</td>
                <td>${val.remark}</td>
            </tr>
        `
    })
    $trg.html(trg_html);
}

//初始化一级菜单
function initApiMenu() {
    $.ajax({
        url: tools.apiUrl + 'mainMenu/list',
        type: 'get',
        success: function (res) {
            renderApiMenu(res.data);
            initExpCode();
        }
    })
}
//渲染一级菜单
function renderApiMenu(data) {
    let $trg = $('#menu_content_box');
    data.map(val => {
        $trg.append(`
            <div class="menu_bb active" id="menu_${val.id}">
                <div class="menu_level_1">
                    
                    <div class="help_title">
                        ${val.name}
                    </div>
                </div>
                <div class="menu_level_2">
                    <div class="tab_">

                    </div>
                </div>
            </div>
        `);
        MENU[val.id] = $('#menu_' + val.id).find('.menu_level_2 .tab_');
    });
    initApiList();
}
//初始化二级菜单
function initApiList() {
    $.ajax({
        url: tools.apiUrl + 'api/list',
        type: 'get',
        success: function (res) {
            renderApiList(res.data);
            //初始化第一个api详情;
            let $trg_ = $('.menu_bb:eq(0)').find('.tab_item:eq(0)')
            let id = $trg_.addClass('active').attr('data-id');

            getApiDetail(id);
        }
    })
}

//渲染二级子菜单
function renderApiList(data) {
    data.map(val => {
        if (!MENU[val.mainMenuIdFk]) return
        MENU[val.mainMenuIdFk].append(`
            <div class="tab_item" data-id="${val.id}">
                <a>${val.name}</a>
            </div>
        `)
    });
}


//初始化示例代码
function initExpCode() {
    $.ajax({
        url: tools.apiUrl + 'sampleCode/list',
        type: 'get',
        success: function (res) {
            renderExpTitle();
            var htm = converter.makeHtml(res.data.content)
            // $('#code_content').html(res.data.content);
            $('#code_content').html(htm);
            $('.language-java').each(function(i, block) {
                $(this).removeClass('language-java');
                setTimeout(function() {
                    hljs.highlightBlock(block);
                }, 1000)
            });
        }
    })
}
function renderExpTitle() {
    let $trg = $('#menu_content_box');
    $trg.append(`
        <div class="expCode">
            示例代码
        </div>
    `);
}

$(document).on('click', '.menu_bb .help_title', function () {
    $(this).parent().parent().toggleClass('active');
})

$(document).on('click', '.expCode', function() {
  if(!$(this).hasClass('active')) {
    $(this).addClass('active');
    showCode();
  }
});

//显示code 框
function showCode() {
    $('#api_info_box').hide();
    $('#exp_code_box').show();
    $('.menu_bb .tab_item').removeClass('active');
    $(window).scrollTop(0);
}

function hideCode() {
    $('#exp_code_box').hide();
    $('#api_info_box').show();
    $('.expCode').removeClass('active');
}